<template>
  <view class="ai-avatar" :class="['ai-avatar__'+size, 'ai-avatar__'+shape]">
    <image class="img" :src="src"></image>
  </view>
</template>

<script>
  /**
   * Avatar 头像
   * @description 用来代表用户或事物，支持图片
   * @property {String} src 图像的资源地址
   * @property {String} size = [sm|md|lg|xl|xxl] 头像的大小，默认 'md'
   * 	@value sm 小
   * 	@value md 中
   * 	@value lg 大
   *  @value xl 超大
   *  @value xxl 超超大
   * @property {String} shape = [circle|square] 头像的大小，默认 'circle'
   * 	@value circle 圆形
   * 	@value square 方形
   * @example <ai-avatar src="https://xxx"></ai-avatar>
   */
  export default {
    name: "ai-avatar",
    props: {
      src: String,
      size: {
        type: String,
        default: "md"
      },
      shape: {
        type: String,
        default: "circle"
      }
    },
    data() {
      return {};
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .ai-avatar {
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;

    .img {
      display: block;
      width: $avatar-size;
      height: $avatar-size;
      object-fit: cover;
    }
  }

  .ai-avatar__sm .img {
    width: $avatar-size-sm;
    height: $avatar-size-sm;
  }

  .ai-avatar__lg .img {
    width: $avatar-size-lg;
    height: $avatar-size-lg;
  }
  
  .ai-avatar__xl .img {
    width: $avatar-size-lg * 1.2;
    height: $avatar-size-lg * 1.2;
  }
  
  .ai-avatar__xxl .img {
    width: $avatar-size-lg * 1.2 * 1.2;
    height: $avatar-size-lg * 1.2 * 1.2;
  }

  .ai-avatar__square {
    border-radius: $avatar-square-border-radius;
  }
</style>